<template>
  <div class="manu-box">
    <div class="menu">
      <n-split :default-size="1">
        <template #1>
          <n-menu
              v-model:value="activeKey"
              mode="horizontal"
              :options="menuOptions"
              responsive
              default-value="layer"
          />
        </template>
      </n-split>
    </div>
  </div>
</template>

<script setup>
import {NIcon, NMenu, NSplit} from "naive-ui"
import {defineComponent, h, onMounted, ref} from "vue"
import {
  LocationOutline,
  Albums
} from "@vicons/ionicons5"
import {RouterLink} from "vue-router"
defineComponent({
  components: {
    NIcon,
    NSplit,
    NMenu,
  }
})
onMounted(()=>{
  activeKey.value = 'layer'
})
// menu
const renderIcon = (icon) => {
  return () => h(NIcon, null, { default: () => h(icon) });
}
const menuOptions = [
  {
    label: () =>
        h(
            RouterLink,
            {
              to: {
                name: 'layer',
              }
            },
            { default: () => '图层' }
        ),
    key: 'layer',
    icon: renderIcon(Albums)
  },
  {
    label: () =>
        h(
            RouterLink,
            {
              to: {
                name: 'location',
              }
            },
            { default: () => '查询' }
        ),
    key: 'location',
    icon: renderIcon(LocationOutline)
  },
]
const activeKey = ref(null)
</script>

<style scoped lang="less">
.manu-box{
  height: 20vh;
  width:auto;
  .menu{
    height: 4.5vh;
    width: 19vw;
    position: absolute;
    top: 10%;
    left: 1%;
    background-color: rgba(173, 216, 230, 0.2);
    border: 1px solid rgba(220, 220, 220, 0.3);
    box-shadow: 2px 3px 9px rgba(220, 220, 220, 0.7);
  }
}
/deep/.n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header a{
  color: #008B8B !important;
  &:hover{
    color: #008B8B !important;
  }
}
/deep/.n-menu.n-menu--horizontal .n-men u-item-content.n-menu-item-content--selected .n-menu-item-content__icon{
  color: #008B8B !important;
  &:hover{
    color: #008B8B !important;
  }
}

/deep/.n-menu.n-menu--horizontal .n-menu-item-content .n-menu-item-content-header a{
  color: white !important;
  font-size: 1.7vh;
  letter-spacing: 2px;
  line-height: 4.5vh;
}
/deep/.n-menu .n-menu-item-content .n-menu-item-content__icon{
  color: white !important;
  font-size: 1.7vh;
  letter-spacing: 2px;
  line-height: 4.5vh;
}
/deep/.v-overflow{
  justify-content: space-around !important;
}
</style>